<template>
  <div id="app">
    <el-container>
      <my-component-header @setDialogFormVisible="setDialogFormVisible" />

      <el-main style="padding: 0px 100px">
        <div class="nav_menu">
          <!-- 上方的导航栏 -->
          <my-component-navmenu />
          <div>
            <el-card
              style="
                height: 300px;
                width: 600px;
                margin: 50px auto;
                padding: 50px;
              "
              :body-style="{ padding: '0px' }"
            >
              <div style="text-align: center">
                <div style="color: #40485b; font-size: 26px">密码找回</div>
                <div style="line-height: 30px; margin: 10px">
                  请通过输入新密码以重置你的 电信产品订购入库系统 帐号密码
                </div>

                <div>
                  <el-input
                    readonly
                    v-model="user.username"
                    style="width: 300px; margin: 10px"
                    prefix-icon="el-icon-user"
                    value="您的用户名"
                  >
                  </el-input>
                </div>

                <div>
                  <el-input
                    style="width: 300px; margin: 10px"
                    prefix-icon="el-icon-lock"
                    type="password"
                    v-model="user.firstnewpassword"
                    value="您的新密码"
                  >
                  </el-input>
                </div>

                <div>
                  <el-input
                    style="width: 300px; margin: 10px"
                    prefix-icon="el-icon-lock"
                    type="password"
                    v-model="user.secondnewpassword"
                    value="再次输入新密码"
                  >
                  </el-input>
                </div>

                <div>
                  <el-button
                    @click.native="updatePassword"
                    style="width: 300px; margin: 10px"
                    type="danger"
                    >重 置 密 码</el-button
                  >
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-main>
      <el-footer>
        <!-- 页脚 -->
        <my-component-footer />
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { userResetPassword } from "../api/user";
import Header from "../components/Header.vue";
import NavMenu from "../components/NavMenu.vue";
import Footer from "../components/Footer.vue";
import baseMixin from "../mixin/baseMixin";
export default {
  mixins: [baseMixin],
  components: {
    "my-component-header": Header,
    "my-component-navmenu": NavMenu,
    "my-component-footer": Footer,
  },
  data() {
    return {
      user: {},
    };
  },
  methods: {
    async updatePassword() {
      let user = this.user;
      console.log(user);
      if (
        typeof user.firstnewpassword === "undefined" ||
        typeof user.secondnewpassword === "undefined"
      ) {
        this.$message.error("密码不可为空！");
        return;
      }

      if (user.firstnewpassword !== user.secondnewpassword) {
        this.$message.error("密码输入不一致！");
        return;
      }

      await userResetPassword(this.user)
        .then((res) => {
          let code = res.code;
          let message = res.message;
          if (code === 201) {
            this.$message.error(message);
          } else {
            this.$message.success(message);
            this.logOut();
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
  },
  created() {
    let infoFromEmail = this.$route.query;
    if (JSON.stringify(infoFromEmail) !== "{}") {
      let username = infoFromEmail.username;
      let token = infoFromEmail.token;
      this.user.username = username;
      sessionStorage.setItem("token", token);
    }
    console.log();
  },
};
</script>

<style lang="scss">
@import "../assets/css/global.scss";
</style>